import { Button, Card, Image, Spacer, Link } from "@nextui-org/react";
import React from "react";
import { TypeAnimation } from "react-type-animation";
import 'typeface-quicksand';
import { Quicksand } from "next/dist/compiled/@next/font/dist/google";
import { Divider } from "@nextui-org/divider";
import { AiFillRightCircle } from "react-icons/ai";
import { CardBody } from "@nextui-org/card";
// @ts-ignore
import { UndrawCoding, UndrawCreationProcess } from 'react-undraw-illustrations';
import { FaCloud, FaMarkdown, FaMobileAlt, FaLock, FaMouse } from "react-icons/fa";
import { IoMdSync } from "react-icons/io";
import { BsShieldLock } from "react-icons/bs";
import { HiOutlineSparkles } from "react-icons/hi";

/**
 * 首页Body内容
 * @constructor
 */
export default function HomeBody({ onOpen }: any) {
    const features = [
        { icon: <FaMarkdown className="text-2xl" />, title: "Markdown全支持", description: "轻松使用标记语言格式化文档" },
        { icon: <FaMouse className="text-2xl" />, title: "AI辅助创作", description: "智能助手帮您生成、优化内容" },
        { icon: <FaMobileAlt className="text-2xl" />, title: "多设备同步", description: "在任何设备上访问您的笔记" },
        { icon: <BsShieldLock className="text-2xl" />, title: "数据安全", description: "端到端加密保护您的信息" }
    ];

    return (
        <>
            <div className="h-full w-full overflow-auto flex flex-col justify-start items-center dark:bg-default-200 bg-white MSpace pb-16">
                {/* 顶部装饰背景 - 增强几何图形设计 */}
                <div className="absolute top-0 left-0 w-full h-[350px] overflow-hidden z-0">
                    <div className="absolute w-full h-full bg-gradient-to-r from-primary/15 via-secondary/10 to-primary/15"></div>
                    <div className="absolute w-full h-full">
                        {/* 增强几何图形装饰 */}
                        <div className="absolute top-[10%] left-[5%] w-20 h-20 rounded-full bg-primary/15 blur-xl animate-pulse"></div>
                        <div className="absolute top-[15%] right-[15%] w-28 h-28 rounded-full bg-secondary/20 blur-xl animate-pulse" style={{animationDelay: "1s"}}></div>
                        <div className="absolute top-[5%] right-[30%] w-16 h-16 rounded-full bg-primary/15 blur-xl animate-pulse" style={{animationDelay: "2s"}}></div>

                        {/* 增强格子装饰 */}
                        <div className="absolute top-0 left-0 w-full h-full opacity-15">
                            <div className="absolute top-[8%] left-[10%] w-36 h-36 border-2 border-primary/30 rounded-lg transform rotate-12 animate-float"></div>
                            <div className="absolute top-[25%] left-[30%] w-20 h-20 border-2 border-secondary/30 rounded-lg transform -rotate-12 animate-float" style={{animationDelay: "1.5s"}}></div>
                            <div className="absolute top-[5%] right-[20%] w-28 h-28 border-2 border-primary/30 rounded-lg transform rotate-45 animate-float" style={{animationDelay: "0.5s"}}></div>
                        </div>

                        {/* 增强小点装饰 */}
                        <div className="absolute top-[15%] left-[25%] w-1.5 h-1.5 rounded-full bg-primary animate-blink"></div>
                        <div className="absolute top-[25%] left-[40%] w-1 h-1 rounded-full bg-secondary animate-blink" style={{animationDelay: "0.8s"}}></div>
                        <div className="absolute top-[10%] left-[60%] w-1.5 h-1.5 rounded-full bg-primary animate-blink" style={{animationDelay: "1.6s"}}></div>
                        <div className="absolute top-[20%] left-[75%] w-1 h-1 rounded-full bg-secondary animate-blink" style={{animationDelay: "2.4s"}}></div>
                        <div className="absolute top-[30%] left-[85%] w-1.5 h-1.5 rounded-full bg-primary animate-blink" style={{animationDelay: "3.2s"}}></div>
                    </div>
                </div>

                {/* 主内容区域 */}
                <div className="relative z-10 flex flex-col items-center justify-center w-full max-w-7xl px-4 pt-20 pb-8">
                    {/* 标题和动画 - 添加固定高度容器 */}
                    <div className="flex flex-col items-center text-center mb-10 pb-4">
                        <div className="relative">
                            <div className="absolute -top-2 -right-4 w-12 h-12 bg-primary/20 rounded-full blur-xl"></div>
                            <div className="absolute -bottom-4 -left-4 w-14 h-14 bg-secondary/20 rounded-full blur-xl"></div>
                            <h1 className="text-4xl md:text-6xl font-bold mb-2 text-gradient bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary">
                                Me Notes
                            </h1>
                        </div>
                        
                        {/* 添加固定高度的容器，防止文本换行导致布局偏移 */}
                        <div className="h-[100px] md:h-[120px] flex items-center justify-center">
                            <TypeAnimation
                                className="text-xl md:text-3xl leading-tight md:leading-tight whitespace-pre-line font-bold dark:text-white light:text-black text-center"
                                speed={50}
                                repeat={0}
                                sequence={[
                                    '',
                                    800,
                                    '您的📕百事百科',
                                    800,
                                    '您的📕百事百科，📒云储文档',
                                    800,
                                    '您的📕百事百科，📒云储文档，\n&🎯项目。',
                                    800,
                                    '您的📕百事百科，📒云储文档，\n&🎯项目。共享合作。',
                                    1000,
                                ]}
                            />
                        </div>
                        
                        <p className="text-sm md:text-base text-default-600 mt-5 max-w-2xl">
                            <span className="font-medium">微服务架构</span>的云笔记平台，为您提供<span className="font-medium">数字化信息管理</span>的一站式解决方案，
                            让知识管理变得简单而高效。
                        </p>
                    </div>

                    {/* 创意按钮设计 - 添加悬浮效果和光晕 */}
                    <div className="flex flex-col items-center mb-16 relative">
                        {/* 添加光晕效果 */}
                        <div className="absolute -z-10 w-48 h-48 bg-gradient-to-r from-primary/30 to-secondary/30 rounded-full blur-xl opacity-80 transform -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2"></div>
                        
                        <Button
                            className="bg-gradient-to-r from-primary to-secondary text-white rounded-full h-14 px-8 shadow-lg font-medium hover:scale-105 transition-all duration-300 relative overflow-hidden group"
                            size="lg"
                            endContent={<AiFillRightCircle className="text-xl group-hover:rotate-90 transition-transform duration-300" />}
                            onPress={onOpen}>
                            {/* 按钮内部光效 */}
                            <span className="absolute inset-0 w-full h-full bg-gradient-to-r from-white/0 via-white/20 to-white/0 transform translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000"></span>
                            即刻开启您的知识旅程
                        </Button>
                        
                        <p className="text-xs text-default-500 mt-3 bg-white/70 dark:bg-default-100/70 backdrop-blur-sm px-4 py-1 rounded-full">
                            免费注册 · 简单易用 · 安全可靠
                        </p>
                    </div>

                    {/* 内容预览卡片 */}
                    <div className="w-full mb-20 flex flex-col md:flex-row gap-8 items-center">
                        <div className="w-full md:w-1/2 order-2 md:order-1">
                            <Card className="overflow-hidden shadow-xl border bg-gradient-to-bl from-background/80 to-background/30 backdrop-blur-sm hover:shadow-2xl transition-shadow">
                                <CardBody className="p-0">
                                    <Image
                                        className="w-full h-auto object-cover"
                                        alt="Me Notes示例"
                                        src="https://evan-1304983303.cos.ap-nanjing.myqcloud.com/note/design_TIP.png"
                                    />
                                </CardBody>
                            </Card>
                        </div>
                        <div className="w-full md:w-1/2 space-y-4 order-1 md:order-2">
                            <h2 className="text-2xl md:text-3xl font-bold">专为知识管理设计的<br /><span className="text-primary">智能笔记系统</span></h2>
                            <p className="text-default-600">
                                基于Spring Cloud微服务架构与React前端技术栈构建，Me Notes将高效的知识管理与现代化的用户体验完美结合。无论是个人学习、工作笔记还是团队协作，都能满足您的需求。
                            </p>
                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-6">
                                {features.map((feature, index) => (
                                    <Card key={index} className="bg-background/60 dark:bg-default-100/40 backdrop-blur-sm p-2 hover:scale-[1.02] transition-transform">
                                        <CardBody className="p-3 flex flex-row items-start">
                                            <div className="mr-3 text-primary">{feature.icon}</div>
                                            <div>
                                                <h3 className="text-sm font-bold">{feature.title}</h3>
                                                <p className="text-xs text-default-500">{feature.description}</p>
                                            </div>
                                        </CardBody>
                                    </Card>
                                ))}
                            </div>
                        </div>
                    </div>

                    {/* 装饰性图标和文本 */}
                    <div className="relative w-full flex flex-col items-center mb-16">
                        <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-background/0 via-primary/5 to-background/0 rounded-3xl -z-10"></div>
                        <h2 className="text-2xl md:text-3xl font-bold mb-8 text-center">开启<span className="text-primary">智能化</span>笔记体验</h2>
                        <div className="flex flex-wrap justify-center gap-8 md:gap-16 max-w-3xl mb-8">
                            <div className="transform hover:scale-105 transition-transform">
                <UndrawCreationProcess
                    skinColor="#FFF"
                                    primaryColor="#6b7ed9"
                    accentColor="#000"
                    hairColor="#000"
                                    height="180px"
                />
                            </div>
                            <div className="transform hover:scale-105 transition-transform">
                <UndrawCoding
                    skinColor="#FFF"
                                    primaryColor="#6b7ed9"
                    accentColor="#000"
                    hairColor="#000"
                                    height="180px"
                                />
                            </div>
                        </div>
                        <p className="text-center max-w-2xl text-default-600">
                            Me Notes不仅是一个笔记应用，更是您思想的延伸。我们致力于帮助您捕捉灵感、整理知识、协作共享，
                            让您的创意和知识创造更大的价值。
                        </p>
                    </div>

                    {/* 开始使用卡片 */}
                    <Card className="w-full max-w-4xl bg-gradient-to-r from-primary/20 to-secondary/20 dark:from-primary/30 dark:to-secondary/30 border-none shadow-lg mb-16 hover:shadow-xl transition-shadow">
                        <CardBody className="flex flex-col md:flex-row items-center justify-between gap-6 p-8">
                            <div>
                                <h3 className="text-xl md:text-2xl font-bold mb-2">准备好开始您的知识管理之旅了吗？</h3>
                                <p className="text-default-600">加入Me Notes，体验AI辅助下的智能笔记管理</p>
                            </div>
                            <Button
                                className="bg-primary text-white rounded-full px-8 hover:bg-primary/90 transition-colors"
                                size="lg"
                                endContent={<HiOutlineSparkles />}
                                onPress={onOpen}>
                                立即开始
                            </Button>
                        </CardBody>
                    </Card>
                </div>
            </div>

            {/* 底部信息 - 移出滚动区域，固定在底部 */}
            <div className="fixed bottom-0 left-0 w-full border-t-1 dark:border-t-gray-700/50 flex justify-center items-center bg-white/90 dark:bg-default-100/90 backdrop-blur-md h-16 z-20">
                <div className="flex flex-col sm:flex-row items-center gap-2">
                    <span className="text-xs md:text-sm font-light text-default-600">
                        ©2025 Me Notes · 个人毕业设计项目
                    </span>
                    <span className="hidden sm:block text-default-400">|</span>
                    <Link href="https://gitee.com/uyevan/wow-note-spring" className="text-xs md:text-sm text-primary" isExternal showAnchorIcon>
                        Gitee 仓库
                    </Link>
                    <span className="hidden sm:block text-default-400">|</span>
                    <span className="text-xs text-default-400">
                        陕ICP备2022014030号-2
                </span>
            </div>
        </div>
        </>
    )
}